<!-- author: xuett -->
<!-- date: 2023-04-23 14:45:29 -->
<!-- description: 表格列 -->
<template>
  <!-- 默认 -->
  <el-table-column
    v-if="!col.children"
    :prop="col.prop"
    :label="col.label"
    :align="col.align ? col.align : 'center'"
    :fixed="col.fixed ? col.fixed : false"
    :width="col.width ? col.width : ''"
    :min-width="col.minWidth ? col.minWidth : ''"
    :show-overflow-tooltip="col.type == 'html' ? false : { 'raw-content': true }"
    header-align="center"
  >
    <!-- 自定义表头 -->
    <template v-if="col.isHeaderSlot" #header="{ column, $index }">
      <slot :name="`${col.prop}-header`" :column="column" :index="$index"></slot>
    </template>
    <!-- input -->
    <template v-if="col.type == 'input'" #default="scope">
      <el-input v-model="scope.row[col.prop]" />
    </template>
    <!-- select -->
    <template v-else-if="col.type == 'select'" #default="scope">
      <el-select v-model="scope.row[col.prop]" placeholder="请选择" :filterable="col.filterable" clearable>
        <!-- 字典 -->
        <template v-if="col.dict">
          <el-option v-for="a in $dict[col.dict]" :key="a.value" :label="a.label" :value="a.value" />
        </template>
        <!-- 自定义 -->
        <template v-else-if="col.options">
          <el-option v-for="a in col.options" :key="a.value" :label="a.label" :value="a.value" />
        </template>
      </el-select>
    </template>
    <!-- 列插槽 -->
    <template v-else-if="col.type == 'slot'" #default="scope">
      <slot :name="col.prop" :row="scope.row" :index="scope.$index"></slot>
    </template>
  </el-table-column>
  <!--  children -->
  <el-table-column
    v-else
    :label="col.label"
    :align="col.align ? col.align : 'center'"
    :fixed="col.fixed ? col.fixed : false"
    show-overflow-tooltip
    :width="col.width ? col.width : ''"
  >
    <tableColumnItem v-for="(t, tIndex) in col.children" :key="tIndex" :col="t" :custom-column="customColumn" @call-back-data="tableOperate">
      <template v-for="(slot, i) in Object.keys(customSlots)" :key="i" #[slot]="scope">
        <!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
        <slot :name="slot" v-bind="scope" />
      </template>
    </tableColumnItem>
  </el-table-column>
</template>

<script setup>
import tableColumnItem from "./table-column-item.vue";
// import { checkPermi } from "@/utils/permission"; // 权限判断函数
const { proxy } = getCurrentInstance();

const $props = defineProps({
  customColumn: {
    type: Boolean,
    default: false
  },
  col: {
    type: Object,
    default: () => {
      return {};
    }
  },
  statePower: {
    type: String,
    default: ""
  }
});
const $emit = defineEmits(["callBackData"]);

const customSlots = reactive({
  ...proxy.$slots
});

//初始化-字典数据
const $dict = ref([]);
//监听表头变化，重新加载字典
watch(
  () => $props.col,
  (newVal) => handleDict(newVal)
);

onMounted(() => {
  handleDict($props.col);
});

// 处理html 格式换行
// function toBreak(val) {
//   if (val) return val.split("\n").join("<br/>");
// }

//处理字典
const handleDict = (val) => {
  if (val.dict) {
    // $dict.value = getDict([val.dict]);
    $dict.value = proxy.useDict([val.dict]);
  }
};

//table-操作
const tableOperate = (val, i) => {
  console.log(val, i, "--");
  $emit("callBackData", val, i);
};
</script>

<style scoped lang="scss">
.text-box {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 这里是超出几行省略 */
}
.custom-tooltip {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 这里是超出几行省略 */
}
</style>
